<% menu_id = "#{SecureRandom.uuid}_results_per_page_menu" %>
<div class="flex items-center gap-1">
  <%= icon "list-check-2", class: "w-4 h-4 text-gray fill-current" %>
  <p class="text-gray-2"><%= t("decidim.shared.results_per_page.label") %></p>

  <details class="relative">
      <summary id="<%= menu_id %>-control" class="flex items-center cursor-pointer text-secondary font-semibold" aria-controls="<%= menu_id %>" aria-haspopup="menu" title="<%= t("decidim.shared.results_per_page.title") %>">
        <%= per_page %>
        <%= icon "arrow-down-s-line", class: "w-4 h-4 text-gray fill-current" %>
      </summary>

      <ul id="<%= menu_id %>" class="dropdown dropdown__bottom" role="menu" aria-labelledby="<%= menu_id %>-control">
        <% Decidim::Paginable::OPTIONS.each do |per_page_option| %>
          <li role="presentation">
            <%= link_to per_page_option,
                        url_for(params.to_unsafe_h.merge(page: nil, per_page: per_page_option)),
                        data: { per_page_option: },
                        class: "dropdown__item",
                        title: t("decidim.shared.results_per_page.title"),
                        role: "menuitem" %>
          </li>
        <% end %>
      </ul>

  </details>
</div>
